<template>
	<view>
		<view class="item" v-for="item in list" @click="goPage('/pages/consult/info?info='+JSON.stringify(item))">
			<view class="title-box">
				{{item.title}}
			</view>
			<view class="des-box">
				{{item.content}}
			</view>
			<view class="statistics-box">
				<view style="color:#999999">
					{{timeFormat(item.createTime,'yyyy-mm-dd hh:MM:ss')}}
				</view>
				<!-- <view class="left-box">
					<view>
						<image src="../../static/img/consult/Read.png" style="width: 27rpx; height: 27rpx;"></image>
						<text>1k</text>
					</view>
					<view>
						<image src="../../static/img/consult/message.png" style="width: 27rpx; height: 27rpx;"></image>
						<text>6</text>
					</view>
					<view>
						<image src="../../static/img/consult/forward.png" style="width: 27rpx; height: 27rpx;"></image>
						<text>5</text>
					</view>
				</view> -->
				<!-- <view class="right-box">
					<image src="../../static/img/consult/like-a.png" style="width: 27rpx; height: 27rpx;"></image>
					<text>{{$t('consult.like')}}</text>
				</view> -->
			</view>
		</view>


		<view class="bottom-box"></view>
		<tabbarVue :current="1"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		getContent
	} from '@/common/api/common.js'
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import { timeFormat } from '@/uni_modules/uview-plus';

	const list = ref([])
	const page = ref(0)
	const pageSize = ref(10)
	const title = ref('')
	const totalPages = ref(0)

	const getContentFn = async () => {
		const res = await getContent({
			page: page.value,
			pageSize: pageSize.value,
			title: title.value
		})
		if (res.status == 0) {
			if (page.value == 0) {
				list.value = res.result.content
			} else {
				list.value = list.value.concat(res.result.content)
			}

			totalPages.value = res.result.totalPages
		}
	}


	const goPage = url => {
		uni.navigateTo({
			url: url
		})
	}

	onShow(() => {
		page.value = 0
		getContentFn()
	})

	onReachBottom(() => {
		if (page.value < totalPages.value) {
			page.value += 1
			getContentFn()
		}
	})
</script>

<style lang="scss" scoped>
	.item {
		width: calc(100vw - 40rpx - 40rpx);
		padding: 30rpx 0;
		border-bottom: 1rpx solid #00000010;
		margin: 0 auto;

		.title-box {
			font-weight: 500;
			font-size: 30rpx;
			color: #3D3D3D;
			margin-bottom: 20rpx;

			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5em;
			/* 设置行高 */
			max-height: 3em;
			/* 行高的两倍，因为最多显示两行 */
		}

		.des-box {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 20rpx;
			
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5em;
			/* 设置行高 */
			max-height: 6em;
			/* 行高的两倍，因为最多显示两行 */
		}

		.statistics-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-box {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #6E6E6E;

				view {
					margin-right: 50rpx;

					text {
						font-weight: 500;
						font-size: 24rpx;
						padding-left: 6rpx;
					}
				}
			}

			.right-box {
				color: #6E6E6E;

				text {
					font-weight: 500;
					font-size: 24rpx;
					padding-left: 6rpx;
				}
			}
		}
	}

	.bottom-box {
		height: calc(120rpx + env(safe-area-inset-bottom) + 40rpx);
	}
</style>